<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/10/19
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>医生信息</title>
    <meta charset="UTF-8">
    <!--引入elementui的样式-->
    <!-- 引入外部样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <!-- 引入相关插件，也叫依赖-->
    <!--引入vue的依赖，必须在elementui之前引入vue-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <style>
        body{
            background-color:  #855E42;
        }
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 350px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-main>
        <el-row :gutter="20" style="margin-bottom: 30px" >
            <el-col :span="8" v-for="(o,index) in doctorMessage" :key="o.dId">
                <el-card class="box-card" style="background-color: #042831;color:  #9F5F9F;" >
                    <div slot="header" class="clearfix">
                        <span>医生详情</span>
                    </div>
                    <div class="text item">
                        <div >
                            <img :src="o.dHeadurl" width="75" height="75" style="margin-left: 100px">
                        </div>
                        <div style="line-height: 2">
                            医生姓名:  {{o.dName}}
                        </div>
                        <div style="line-height: 2">
                            年龄:  {{o.dAge}}
                        </div>
                        <div style="line-height: 2">
                            性别:  {{o.sex}}
                        </div>
                        <div style="line-height: 2">
                            电话:  {{o.dTelphone}}
                        </div>
                        <div style="line-height: 2">
                            学历:  {{o.dEducation}}
                        </div>
                        <div style="line-height: 2">
                            所属部门:  {{o.deptName}}
                        </div>
                        <div style="line-height: 2">
                            所在科室:  {{o.tName}}
                        </div>
                        <div style="line-height: 2">
                            主治方向:  {{o.dMajor}}
                        </div>
                        <div style="line-height: 2">
                            个人成就:  {{o.dAchievement}}
                        </div>

                    </div>
                </el-card>
            </el-col>
        </el-row>

    </el-main>
</div>
</body>
<script>
   let vue = new Vue({
       el:'#app',
       data:{
            doctorMessage:[],

       },
       created() {
         this.initDoctor();
        },
       methods:{
                initDoctor(){
                    axios.post("/doctor/all?currentPage=1&pageSize=50",{}).then(resp=>{
                        if(resp.data.code === 2000){
                            this.doctorMessage = resp.data.data.list;
                            // this.imageUrl = this.doctorMessage.dheadurl;
                            console.log(this.doctorMessage)
                        }
                    })
   }
       }
   });
</script>
</html>
